import React, { Component } from 'react';
import { connect } from 'react-redux'
import { createAddPersonAction } from '../../redux/actions/person'

class Person extends Component {

  addPerson = () => {
    const name = this.nameNode.value
    const age = this.ageNode.value * 1
    const personObj = { id: Date.now(), name, age }
    this.props.addPerson(personObj)
    // 输入后清空
    this.nameNode.value = ''
    this.ageNode.value = ''
  }

  render() {
    return (
      <div>
        <h2>我是Person组件, 上方组件求和为{this.props.sumRes}</h2>
        <input ref={c => this.nameNode = c} type="text" placeholder="输入名字" />
        <input ref={c => this.ageNode = c} type="text" placeholder="输入年龄" />
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.peopleArr.map((p) => {
              return <li key={p.id}>{p.id} -- {p.name} -- {p.age}</li>
            })
          }
        </ul>
      </div>
    );
  }
}

export default connect(
  state => ({
    peopleArr: state.peopleArr,
    sumRes: state.sumRes
  }),//映射状态
  { addPerson: createAddPersonAction }//映射操作状态的方法
)(Person)